<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/eui.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="margin: 10px;">
              <h2>热门文章推荐</h2>
        </el-header>
        <el-main>
            <el-row>
             <el-button type="primary" @click="toAdd()">发布一篇新文章</el-button>
            </el-row>
            <el-table
                    :data="articles"
                    style="width: 100%">
                <el-table-column
                        prop="title"
                        label="标题"
                        width="240">
                </el-table-column>
                <el-table-column
                        prop="createdTime"
                        label="发布日期"
                        width="240">
                </el-table-column>
                <el-table-column
                        prop="author.username"
                        label="作者"
                        width="240">
                </el-table-column>
            </el-table>
            <el-pagination @current-change="handleCurrentChange"
                           :current-page="pageCurrent"
                           :page-size="pageSize"
                           layout="total, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
        </el-main>
    </el-container>
</div>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data: function() {
            return {
                articles:[],
                pageCurrent:1,
                pageSize: 5,
                total: 0
            }
        },
        mounted:function(){//页面加载完成后执行
                let url="/article/list2/1/5";
                axios.get(url).then(resp=>{
                    debugger
                    let result=resp.data;
                    this.articles=result.data.list;
                    this.pageSize=result.data.pageSize;
                    this.total=result.data.total;
                })
        },
        methods:{
            toAdd(){
                location.href="/article-add.html";
            },
            //处理分页事件(获取当前页数据)
            handleCurrentChange(page){
                console.log(page);
                let url=`/article/list2/${page}/5`;
                axios.get(url).then(resp=>{
                    let result=resp.data;
                    this.articles=result.data.list;
                    this.pageSize=result.data.pageSize;
                    this.pageCurrent=page;
                    this.total=result.data.total;
                })
            }
        }
    });
</script>
</body>
</html>